'''
1、html的定义及作用：HyperText Mark-up Language，超文本标记语言，是开发网页的语言，用来开发网页的
2、标记：就是标签，如<html></html>、<h1></h1>，成对出现
       标签不区分大小写，建议用小写
       双标签：闭合标签，开始和结束组成一对标签
       单标签：空标签，一个标签组成，没有标签内容
3、html有<head>和<body>两个主要部分
     <head>：不显示在页面上
            <title>：定义网页的标题，显示在浏览器的标签页上。
            <meta>：定义字符集、视口、内容类型、作者、关键词等。
            <link>：链接外部资源，如CSS样式表。
            <script>：引用JavaScript文件或脚本。
            <base>：指定文档中所有相对URL的基准URL。
            <style>：定义内部CSS样式

     <body>：包含网页的所有内容，直接在浏览器窗口可见
            1、所有可见的HTML标签，如 <div>、<p>、<h1> 到 <h6>、<img>、<ul>、<ol>、<li> 等。
            2、交互元素，如表单 <form>、按钮 <button>、链接 <a> 等。
            3、内联JavaScript代码或事件处理器
3、基本结构：
     <!DOCTYPE html>
     <html>
           <head>
              <meta charset='UTF-8'>
              <title>这是网页标题</title>
           <head>
           <body>
               加油！祝我早日找到如意的工作，拿到满意的offer！！！
           </body>
     </html>
4、常用的标签：
    ① 成对出现：
        <h1>设置字体大小</h1>   1-6字体大小逐渐变小
        <div>容器标签</div>  # 专门嵌套和容纳其他标签
        <p>段落标签</p>
    ② 标签的嵌套：
        <div>
           <img scr="images/pic.jpg" alt="图片">
           <a href="http://www.baidu.com">百度网</a>  # 实现超链接，页面出现百度网，点击百度网即可跳转页面
        </div>
    ③ 单个出现：
        <br>  # 在页面中创建一条水平线
           <img scr="images/pic.jpg" alt="图片">
        <hr>  # 插入一个简单的换行符
    ④ 带属性的标签：
        <img scr="images/pic.jpg" alt="图片">
5、列表标签：
    ① 作用：把数据列举出来时需要使用列表
    ② 种类：
        无序列表标签：ul（.苹果 .香蕉）
            <ul>
              <li>苹果</li>
              <li>香蕉</li>
            </ul>
        有序列表标签：ol（1、苹果 2、香蕉）
            <ol>
              <li>苹果</li>
              <li>香蕉</li>
            </ol>
6、表格标签：
    <table border="1"></table>
    行：<tr></tr>
    表头：<th></th>
    列：<td></td>
        实操：-----------
             <table style="border: 1px solid black; border-collapse: collapse">
                 <tr>
                     <th style="border: 1px solid black">姓名</th>
                     <th style="border: 1px solid black">年龄</th>
                 </tr>
                 <tr>
                     <td style="border: 1px solid black">张三</td>
                     <td style="border: 1px solid black">22</td>
                 </tr>
            </table>
7、表单标签：
    ① 作用：搜集不同类型用户输入的数据，提交到web服务器
    ② 元素标签：
         <label>                    文字标注
         <textarea>                 多行文本输入框
         <select>                  下拉列表
            <option>下拉的选项
         <input>                   输入方式
            type属性：
               1、type="text"         单行文本输入框
               2、type="password"     密码输入框
               3、type="radio"        单选框
               4、type="checkbox"     复选框
               5、type="file"         上传文件
               6、type="submit"       提交按钮
               7、type="reset"        重置按钮
               8、type="button"       普通按钮
    ③ 实操：
         <form>
            <label>姓名:</label>
            <input type="text">
            <br>
            <label>密码:</label>
            <input type="password">
            <br>
            <label>性别:</label>
            <input type="radio">男
            <input type="radio">女
            <br>
            <label>爱好:</label>
            <input type="checkbox">吃饭
            <input type="checkbox">睡觉
            <input type="checkbox">打豆豆
            <br>
            <label>照片:</label>
            <input type="file">
            <br>
            <label>个人描述:</label>
            <textarea></textarea>
            <br>
            <label>地址:</label>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广东</option>
                <option>深圳</option>
            </select>
            <br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">

            # -----------------    html刷题
            # 类型为密码，默认值为nowcoder
              类型为复选框，状态为已勾选
              <form>
                <input type="password" value="nowcoder">
                <input type="checkbox" checked>
              </form>
            # 标题为nowcoder，2行3列的表格
                <table>
                    <caption>nowcoder</caption>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            # 具有标题属性和代替文本属性的图片标签
                <body>
                    <img src="" alt="" title="">
                    <script type="text/javascript">
                        // 填写JavaScript
                    </script>
                </body>
            # 在新窗口打开文档的a标签
                <body>
                    <a href="" target="_blank"></a>
                    <script type="text/javascript">
                        /* 填写JavaScript */
                    </script>
                </body>
            # 列表项为nowcoder，列表项内容为nowcoder的自定义列表
                <body>
                   <dl>
                     <!-- 补全代码 -->
                     <dt>nowcoder</dt>
                     <dd>nowcoder</dd>
                   </dl>
                </body>
            # 使用语义化标签，创建头部标签，同时包含导航标签
                <html>
                    <head>
                        <title></title>
                    </head>
                    <body>
                        <header>
                            <nav>导航标签</nav>
                        </header>

                    </body>
                </html>
            # 具有控件功能的音频媒体标签
                <body>
                    <audio src="" controls></audio>
                </body>
            # 具有当视频的媒体数据加载期间发生错误时，执行某个方法事件的视频媒体标签
                <body>
                    <video src="" onerror=function() controls></video>
                    <script type="text/javascript">
                        /* 填写JavaScript */
                    </script>
                </body>
            # 标签、类、ID选择器：html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"
               且字体大小都为20px
                 <style type="text/css">
                        /*补全代码*/
                        div {
                            color: rgb(255, 0, 0);
                            font-size: 20px;
                        }
                        .green{
                            color:rgb(0, 128, 0)
                        }
                        #black{
                            color:rgb(0, 0, 0)
                        }
                 </style>
                 </head>
                 <body>
                    <div>红色</div>
                    <div class='green'>绿色</div>
                    <div id='black'>黑色</div>
                 </body>
            # 伪类选择器：html模块中，ul列表的第2、4个li标签的背景颜色设置
               .li2,.li4{
                      background-color:rgb(255, 0, 0)
               }
                <ul>
                    <li>1</li>
                    <li class="li2">2</li>
                    <li>3</li>
                    <li class="li4">4</li>
                </ul>
            或者：
             <style>
                li:nth-child(even){                  --even=2n，偶数位置
                      background-color:rgb(255,0,0)    odd，奇数位置
                }
             </style>
         # 伪元素：html模块，div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，并设置背景颜色
             <style>
               div::after{
                    content:'';
                    height:20px;
                    width:20px;
                    display:block;                    --伪元素默认为行内元素，设置宽高无效，所以要用display:block;
                    background-color:rgb(255, 0, 0)
               }
             </style>

8、表单提交：
      action属性：提交地址
      method属性：提交方式
           GET： 没有请求体
           POST：有请求体
      name属性： 参数名
      value属性：参数名对应的值
         <form action="https://www.baidu.com" method="POST">
            <label>姓名：</label>
            <input type="text" name="username">
            <br>
            <label>密码：</label>
            <input type="password" name="password">
            <br>
            <label>性别：</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
            <br>
            <label>爱好：</label>
            <input type="checkbox" name="like" value="睡觉">睡觉
            <input type="checkbox" name="like" value="吃饭">吃饭
            <br>
            <label>照片：</label>
            <input type="file" name="pic">
            <br>
            <label>个人描述：</label>
            <textarea name="desc"></textarea>
            <br>
            <label>地址：</label>
            <select name="addr">
                <option value="0">北京</option>
                <option value="1">上海</option>
            </select>
            <br>
            <input type="submit" value="提交">
         </form>
'''